<template>
  <section>
    <div class="tab-content">
      <h2>{{ type && list[type]["tit"] }}</h2>
      <div class="tab" v-if="type != 'info'">
        <span v-for="(val, key, index) in tabType" :key="index" @click="tab(key)" v-if="(type == 'notice' && (index == 3 || index == 4 || index == 5)) || type == 'images' && (index == 3 || index == 4) ||
          index < 3
        " :class="{ active: val }">
          <i class="el-icon-s-data"></i> {{ key }}</span>
      </div>
    </div>
    <component :is="type && list[type]['com']" :data="data" @changeTab="tab" @change="changeData"></component>
  </section>
</template>

<script>
import Info from "../Edit/info";
import Images from "../Edit/image";
import Product from "../Edit/Product";
import Notice from "../Edit/notice";
import Navigation from "../Edit/Navigation";
import InstantDeath from "../Edit/InstantDeath";
import Division from "../Edit/division";
import GroupBooking from "../Edit/GroupBooking";
import bargain from "../Edit/bargain";
import propagate from "../Edit/propagate";
import videoDemo from "../Edit/videoDemo";
import my from "../Edit/my";


export default {
  name: "EditForm",
  components: {
    Info,
    Images,
    Product,
    Notice,
    Navigation,
    InstantDeath,
    Division,
    GroupBooking,
    bargain,
    propagate,
    videoDemo,
    my
  },
  props: {
    data: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      type: "",
      list: {
        info: {
          tit: "页面信息",
          com: "Info",
        },
        head: {
          tit: "商家信息",
          com: "my",
        },
        images: {
          tit: "图片",
          com: "Images",
        },
        banner: {
          tit: "轮播图",
          com: "Images",
        },
        product: {
          tit: "商品",
          com: "Product",
        },
        notice: {
          tit: "公告",
          com: "Notice",
        },
        navigation: {
          tit: "导航栏",
          com: "Navigation",
        },
        // instant: {
        //   name: "秒杀商品",
        //   com: "InstantDeath",
        // },
        division: {
          name: "辅助分割",
          com: "Division",
        },
        // groupBooking: {
        //   name: "拼团",
        //   com: "GroupBooking",
        // },
        // bargain: {
        //   name: "砍价",
        //   com: "bargain",
        // },
        propagate: {
          name: "宣传标题",
          com: "propagate",
        },
        videoDemo: {
          name: "视频",
          com: "videoDemo",
        }
      },
      tabType: {
        1: true,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false,
      },
    };
  },
  watch: {
    data: {
      handler(newData, oldData) {
        // 检查 tabType 是否发生了变化
        console.log(this.data, " 检查 tabType 是否发生了变化  ");
      },
      // 开启深度监听
      deep: true,
    },
  },
  mounted() {
    this.type = this.data.type;
    if (this.data.tabType) {
      this.tab(this.data.tabType);
    }
  },
  methods: {
    tab(key) {
      for (let i in this.tabType) {
        if (key == i) {
          this.tabType[key] = true;
          this.$set(this.data, "tabType", key);
          this.data.tabType = key;
        } else {
          this.tabType[i] = false;
        }
      }
    },


    //修改的数据
    changeData(data) {
      this.$emit("changeData", data)
    }
  },
};
</script>

<style scoped lang="scss">
section {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
}

.tab-content {
  padding: 0 15px;

  h2 {
    font-size: 16px;
    color: #333;
  }

  .tab {
    display: flex;
    justify-content: space-around;
    border: 1px solid #ddd;
    border-radius: 6px;

    span {
      width: 33.33%;
      text-align: center;
      font-size: 14px;
      color: #666;
      display: block;
      height: 36px;
      line-height: 36px;
      cursor: pointer;

      &.active {
        color: #fff;
        background: #409eff;
        border-radius: 2px;
      }

      &:nth-of-type(2) {
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
      }
    }
  }
}
</style>
